<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--
        组件的使用分为三步:
            第一步:创建组件
                Vue.extend({该配置项和new Vue的配置项几乎相同,略有差别})
                区别有哪些?
                    1.创建Vue组件的时候,配置项中不能使用el配置项.(但是需要使用template配置项来配置模版语句)
                    2.配置项中的data不能使用直接对象的形式,必须使用function
            第二步:注册组件
                局部组件:
                    在配置项当中使用components,语法格式:
                        components : {
                            组件的名字 : 组件对象
                        }
                全局注册:
                    Vue.component('组件的名字' , 组件对象)
            第三步:使用组件

    -->

    <div id="app">
        <userlist></userlist>

        <!--3.使用组件-->
        <userlogin></userlogin>
<!--        <userlogin></userlogin>-->
    </div>


    <div id="app2">
        <userlogin></userlogin>
        <hello-word></hello-word>
    </div>


    <script>
        //1.创建abc组件
        const abc = {
            template : `<h1>测试组件的名字????</h1>`
        }

        //全局注册组件
        Vue.component('hello-word' , abc)


        Vue.component('form' , {
            template : `<h1>测试组件的名字</h1>`
        })

        //1.创建组件(解构 HTML 交互JS 样式 CSS)
        const myComponent = Vue.extend({
            template : `
                <ul>
                    <li v-for="(user , index) of users" :key="user.id">
                      {{index}} , {{user.name}}
                    </li>
                </ul>
            `,
            data(){
                return {
                    users : [
                        {id : '001' , name : 'jack'},
                        {id : '002' , name : 'lucy'},
                        {id : '003' , name : 'james'}
                    ]
                }
            }
        })



        //1.创建组件
        // const userLoginComponent = Vue.extend({
        //     template : `
        //         <div>
        //             <h3>用户登录</h3>
        //             <form @submit.prevent="login">
        //                 账号:<input type="text" v-model="username"><br/><br/>
        //                 密码:<input type="password" v-model="password"><br/><br/>
        //                 <button>登录</button>
        //             </form>
        //         </div>
        //     `,
        //     data(){
        //         return {
        //             username : '',
        //             password : ''
        //         }
        //     },
        //     methods : {
        //         login(){
        //             alert(this.username + " , " + this.password)
        //         }
        //     }
        // })


        const userLoginComponent = {
            template : `
                <div>
                    <h3>用户登录</h3>
                    <form @submit.prevent="login">
                        账号:<input type="text" v-model="username"><br/><br/>
                        密码:<input type="password" v-model="password"><br/><br/>
                        <button>登录</button>
                    </form>
                </div>
            `,
            data(){
                return {
                    username : '',
                    password : ''
                }
            },
            methods : {
                login(){
                    alert(this.username + " , " + this.password)
                }
            }
        }

        //全局注册组件
        Vue.component('userlogin' , userLoginComponent)

        const vm2 = new Vue({
            el : '#app2'
        })




        //Vue实例
         const vm = new Vue({
             el: '#app',
             //Model M
             data: {
                 msg: '第一个组件'
             },
             //2.注册组件(局部注册)
            components : {
                 //userList是组件的名字.myComponent只是一个变量名称
                 userlist : myComponent,
                userlogin : userLoginComponent
            }
         })
    </script>
</body>
</html>